*{
    box-sizing: border-box;
}


header{
    text-align: center;
}

#ctrl-btn{
    display: flex;
    justify-content: space-around;
}

#ctrl-btn button{
    background-color: cyan;
    width: 100px;
    height: 30px;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    color: #333;
}

/* 棋盘背景 */
#cb{
    width: 1024px;
    height: 1024px;
    border: solid 1px black;
    margin: 20px auto;
    background-image: url(chess-board.jpg);
}

#gt{
    border: solid 1px red;
    border-collapse: collapse;
    margin: 25.6px 0 0 25.6px;
    width: 973px;
    height: 973px;
}

/* @media screen and (-webkit-min-device-pixel-ratio:0) 
{
    #abc{
        width: 980px;
        height: 980px;
    }
} */

#gt td{
    border: solid 0px red;
    width: 51.2px;
    height: 51.2px;
    /* transform-origin: 20% 10%; */
    transform: scale(0.9);
}

#gt td div{
    width: 100%;
    height: 100%;
}

[state=black]{
    border: solid 1px black;
    border-radius: 50%;
    background-color: white;
    box-shadow: 20px -20px 10px 10px black inset;
}

[state=white]{
    border: solid 1px black;
    border-radius: 50%;
    background-color: white;
    box-shadow: 20px -20px 10px 10px #eee inset;
}

.current{
    border: solid 1px red;
}